import React, { Component, Fragment } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import { Form } from '@ant-design/compatible';
import PageHeader from '@/components/PageHeader';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import {
  Row,
  Col,
  Card,
  Modal,
} from 'antd';

import '@ant-design/compatible/assets/index.css';

import TotalIncome from './components/TotalIncome';
import TotalSpending from './components/TotalSpending';
import Settlement from './components/Settlement';
import Instructions from './components/Instructions';

interface StatementsDetailProps extends FormComponentProps {
  dispatch: Dispatch<any>;
  loading: boolean;
  location: {
    query?: any;
  };
  detailInfo: any;
}

interface StatementsDetailState {
  detail_list: any[];
  loan_repayment: any,
  settlement_list: any[],
  receive_detailInfo: any;
}

function mapStateToProps(state: any) {
  const {
    statementsDetail: { detailInfo, loading },
  } = state;

  return {
    detailInfo,
    loading,
  };
}

@connect(mapStateToProps)

class StatementsDetail extends Component<StatementsDetailProps, StatementsDetailState> {
  state: StatementsDetailState = {
    detail_list: [],
    loan_repayment: {},
    settlement_list: [],
    receive_detailInfo: {},
  }

  static getDerivedStateFromProps(
    nextProps: StatementsDetailProps, perState: StatementsDetailState,
  ) {
    const { detailInfo, detailInfo: { data_info } } = nextProps;
    const { receive_detailInfo } = perState;

    if (data_info && !Object.is(data_info, receive_detailInfo)) {
      const {
        detail_list = [],
        loan_repayment = [],
        loan_repay_list = [],
        service_fee,
        total_cash_income,
        total_expend,
        service_fee_type = 2,
      } = data_info;

      const new_detail_list = detail_list.map((item: any, index: number) => {
        if (index === 0) item.total_income = data_info.total_income;
        return item;
      });

      return ({
        detail_list: new_detail_list,
        loan_repayment: {
          loan_repay_list,
          loan_repayment,
          service_fee,
          total_cash_income,
          total_expend,
          service_fee_type,
        },
        settlement_list: [
          {
            statement_id: detailInfo.statement_id,
            status: data_info.status,
            total_income: data_info.total_income,
            total_expend: data_info.total_expend,
            origin_amount: data_info.origin_amount,
            real_amount: data_info.real_amount,
          },
        ],
        receive_detailInfo: data_info,
      });
    }

    return null;
  }

  componentDidMount() {
    const { location: { query } } = this.props;
    if (query && query.id) {
      this.fetchAction('fetch', { statement_id: query.id });
    }
    this.fetchDetailInfo(query.id);
  }

  componentDidUpdate(prevProps: any) {
    const { location: { query: { id } } } = this.props;
    if (prevProps.location.query.id !== id) {
      this.fetchDetailInfo(id);
    }
  }

  fetchDetailInfo = (statement_id: number) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'statementsDetail/fetch',
      payload: { statement_id },
    });
  }

  handleShowModal = () => {
    const {
      detailInfo: { data_info: { amount_reason } },
    } = this.props;

    Modal.info({
      title: `说明：${amount_reason}`,
      onOk() {},
      maskClosable: true,
    });
  }

  fetchAction = (typeName: string, payload: any) => {
    const { location: { query: { id: statement_id } } } = this.props;
    if (typeName === 'updateMoney') {
      payload = {
        search: { statement_id },
        ...payload,
      };
    }

    const { dispatch } = this.props;
    dispatch({
      type: `statementsDetail/${typeName}`,
      payload,
    });
  }

  render() {
    const {
      detail_list,
      loan_repayment,
      settlement_list,
    } = this.state;

    const {
      loading,
      detailInfo: { data_info },
    } = this.props;


    return (
      <Fragment>
        <PageHeader />

        <Card
          title={`${data_info.title} (金额单位：元)`}
          bordered={false}
          extra={
            <span
              className="operLink"
              onClick={() => this.handleShowModal()}
            >{data_info.amount_reason ? '修改日志' : ''}
            </span>
          }
        >
          <Row gutter={12}>
            <Col className="marginB30">
              <div className="subtitle marginB12">收入项</div>
              <TotalIncome detailList={detail_list} />
            </Col>
          </Row>
          <Row gutter={12}>
            <Col className="marginB30">
              <div className="subtitle marginB12">支出项</div>
              <TotalSpending
                loanRepayment={loan_repayment}
                loading={loading}
              />
            </Col>
          </Row>
          <Row gutter={12}>
            <Col className="marginB30">
              <div className="subtitle marginB12">结算项</div>
              <Settlement
                settlementList={settlement_list}
              />
            </Col>
          </Row>
          <div className="subtitle marginB12">说明</div>
          <Instructions dataInfo={data_info} />
        </Card>

      </Fragment>
    );
  }
}

export default Form.create()(StatementsDetail);
